<template lang="pug">
  FullScreenDialog(ref="dialog")
    template(v-slot:header)
      v-toolbar(dark, color='primary')
        v-btn(icon, dark, @click='cancel')
          v-icon close
        v-toolbar-title {{ title }}
        v-spacer
        v-toolbar-items
    template(v-slot:default)
      transition(name='bounceUp', mode='out-in')
        keep-alive
          component(
            style="animation-duration: 0.3s"
            ref="childCmp"
            :is='view'
            :asset="asset"
            @toggleModel="onToggleModel"
          )

</template>
<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import FullScreenDialog from '@/components/widgets/dialog/FullScreenDialog.vue'
  import AssetStockForm from './asset_stock_form'
  import AssetStockView from './asset_stock_view'

  export default (Vue as VueConstructor<Vue & {
    isViewModel: boolean,
    $refs: {
      dialog: FullScreenDialog,
      childCmp: AssetStockForm | AssetStockView
    }
  }>).extend({
    name: 'asset-stock-details',
    props: ['asset'],
    methods: {
      onToggleModel(model:string){
        this.isViewModel = model == "view"
      },
      cancel() {
        if (this.needRefresh) {
          this.$emit('refresh')
        }
        this.$refs.dialog.toggle()
      },
      toggle(title: string, isNew: boolean = false) {
        this.title = title
        this.isNew = isNew
        this.isViewModel = !isNew
        this.$refs.dialog.toggle()
      }
    },
    computed: {
      needRefresh() {
        return this.asset.id && this.isNew
      },
      view() {
        return this.isViewModel ? AssetStockView : AssetStockForm
      }
    },
    components: { FullScreenDialog, AssetStockForm, AssetStockView },
    data() {
      return {
        isViewModel: true,
        isNew: false,
        title: ''
      }
    }
  })
</script>